<template>
  <!-- 税收管理--新增和编辑 -->
  <el-dialog :title="mode=='add'?'新增':'编辑'"
             class="addRevenue"
             width='662px'
             :close-on-click-modal="false"
             :visible.sync="visible">
    <!-- 具体表单 -->
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="120px">
      <el-form-item label="纳税企业ID"
                    v-if="workerIdVisb"
                    prop="companyId">
        <el-input v-model="dataForm.companyId"
                  placeholder="纳税企业ID"></el-input>
      </el-form-item>
      <!-- <el-form-item label="税务用ID"
                    prop="taxUserId">
        <el-input v-model="dataForm.taxUserId"
                  placeholder="税务用ID"></el-input>
      </el-form-item> -->
      <el-form-item label="任务名称"
                    prop="taskName">
        <el-input v-model="dataForm.taskName"
                  placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="任务编号"
                    prop="taskNo">
        <el-input v-model="dataForm.taskNo"
                  placeholder="任务编号"></el-input>
      </el-form-item>
      <el-form-item label="纳税企业名称"
                    prop="companyName">
        <el-input v-model="dataForm.companyName"
                  placeholder="纳税企业名称"></el-input>
      </el-form-item>
      <el-form-item label="纳税个人姓名"
                    prop="personName">
        <el-input v-model="dataForm.personName"
                  placeholder="纳税个人姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号"
                    prop="mobile">
        <el-input v-model="dataForm.mobile"
                  placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码"
                    prop="cardCode">
        <el-input v-model="dataForm.cardCode"
                  placeholder="身份证号码"></el-input>
      </el-form-item>
      <el-form-item label="银行账户"
                    prop="bankCartId">
        <el-input v-model="dataForm.bankCartId"
                  placeholder="银行账户"></el-input>
      </el-form-item>
      <el-form-item label="开户银行"
                    prop="bankName">
        <el-input v-model="dataForm.bankName"
                  placeholder="开户银行"></el-input>
      </el-form-item>
      <el-form-item label="税前收入"
                    prop="totalPersonalIncome">
        <el-input v-model="dataForm.totalPersonalIncome"
                  placeholder="税前收入"></el-input>
      </el-form-item>
      <el-form-item label="税种"
                    prop="taxCategories">
        <el-input v-model="dataForm.taxCategories"
                  placeholder="税种"></el-input>
      </el-form-item>
      <!-- <el-form-item label="纳费计算公式"
                    prop="payFormulas">
        <el-input v-model="dataForm.payFormulas"
                  placeholder="纳费计算公式"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="应纳税费"
                    prop="payRatio">
        <el-select v-model="dataForm.payRatio"
                   clearable
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="企业缴纳金额"
                    prop="taxPayCompanyMoney">
        <el-input v-model="dataForm.taxPayCompanyMoney"
                  placeholder="企业缴纳金额"></el-input>
      </el-form-item> -->
      <el-form-item label="个人缴纳金额"
                    prop="taxPayPersonMoney">
        <el-input v-model="dataForm.taxPayPersonMoney"
                  placeholder="个人缴纳金额"></el-input>
      </el-form-item>
      <!-- <el-form-item label="总缴纳金额"
                    prop="taxPayTotalMoney">
        <el-input v-model="dataForm.taxPayTotalMoney"
                  placeholder="总缴纳金额"></el-input>
      </el-form-item> -->
      <el-form-item label="缴纳时间"
                    prop="taxPayTime">
        <el-date-picker v-model="dataForm.taxPayTime"
                        type="date"
                        placeholder="缴纳时间"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="税后金额"
                    prop="afterTaxAmount">
        <el-input v-model="dataForm.afterTaxAmount"
                  placeholder="税后金额"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 class="btn"
                 @click="addSave"
                 v-if="mode == 'add'">确认新增</el-button>
      <el-button type="primary"
                 class="btn"
                 @click="update"
                 v-else>确认修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      // 判断添加还是编辑
      mode: 'add',
      workerIdVisb: true,
      // 隐藏
      visible: false,
      // 数据
      dataForm: {
      },
      // 验证
      dataRule: {
        companyName: [
          { required: true, message: '纳税企业名称不能为空', trigger: 'blur' }
        ],
        // taxUserId: [
        //   { required: true, message: '税务用ID不能为空', trigger: 'blur' }
        // ],
        companyId: [
          { required: true, message: '纳税企业ID不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 手机号码正则校验
              let _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ],
        taskNo: [
          { required: true, message: '任务编号不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 正则校验
              let _reg = /^\d+$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('任务编号只能为数字'))
              }
            }
          }
        ]
      },
      // 税收选项
      options: [{
        value: '个税',
        label: '个税'
      }, {
        value: '增值税',
        label: '增值税'
      }, {
        value: '附加税',
        label: '附加税'
      }],
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  created () {
    if (sessionStorage.getItem('userRoleId') === '2') {
      this.workerIdVisb = false
    }
  },
  watch: {
    'dataForm.mobile' () {
      // /sys/user/getInfo
      if (this.mode === 'add') {
        if (this.dataForm.mobile.length === 11) {
          this.$confirm('是否自动填充信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.$message({
            //   type: 'success',
            //   message: '自动填充'
            // })
            // console.log('电话号到11位了')
            this.$http({
              url: this.$http.adornUrl('/sys/user/getInfo?mobile=' + this.dataForm.mobile),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({ data }) => {
              // console.log(data)
              if (data.code === 0) {
                try {
                  this.dataForm.workerName = data.user.userName
                  this.dataForm.cardCode = data.user.idNumber
                  this.dataForm.bankCartId = data.user.bakInfo.bankCardNumber
                  this.dataForm.bankName = data.user.bakInfo.bankName
                } catch (error) {
                }
              } else {
                this.$message({
                  type: 'warning',
                  message: data.msg
                })
              }
            })
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '取消自动填充'
            // })
          })
        }
      }
    }
  },
  methods: {
    // 父调用的方法，新增
    addInit () {
      this.visible = true
    },
    // 父调用的方法，编辑
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$http({
        url: this.$http.adornUrl('/sys/tax/info/' + this.dataForm.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataForm = data.tax
      })
    },
    // 修改提交
    update () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/tax/update'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 新增
    // /sys/tax/save
    addSave () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/tax/save'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
    // 结束
  }
}
</script>

<style lang="scss">
.addRevenue {
  .el-input.el-input--medium {
    width: 370px;
  }
  .el-dialog__header {
    background-color: #f8f8f8;
  }
  .el-dialog__body {
    display: flex;
    justify-content: center;
  }
  .btn {
    width: 370px;
  }
  .dialog-footer {
    text-align: center !important;
    padding-bottom: 39px;
  }
  .el-dialog__footer {
    text-align: center;
    padding-bottom: 39px;
  }
}
</style>
